<template>
    <div class="app-container">
        <div class="query-form">
            <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
                <el-form-item label="救援状态" label-width="90px">
                    <el-select v-model="tableSearchParam.rescueStatusId" clearable placeholder="请选择">
                        <el-option
                                v-for="item in rescueStatus"
                                :value="item.statusId"
                                :key="item.statusId"
                                :label="item.statusName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="还款状态" label-width="90px">
                    <el-select v-model="tableSearchParam.returnStatusId" clearable placeholder="请选择">
                        <el-option
                                v-for="item in returnStatus"
                                :value="item.statusId"
                                :key="item.statusId"
                                :label="item.statusName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="申请单号" label-width="90px">
                    <el-input v-model="tableSearchParam.id" style="width:200px" size="small"
                              clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryData" icon="el-icon-search" size="small">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table :data="dataList" highlight-current-row border>
            <el-table-column prop="id" label="申请单号" width="100"/>
            <el-table-column prop="applyUserName" label="申请人名称" width="200"/>
            <el-table-column prop="applyPhone" label="手机号码" width="160"/>
            <el-table-column prop="applyDate" label="申请时间" width="160"/>
            <el-table-column prop="rescueStatusName" label="救援状态" width="200"/>
            <el-table-column prop="returnStatusName" label="还款状态" width="200">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="small" @click="showDetail(scope.row)" icon="el-icon-document">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page=this.pagination.pageNum
                    :page-sizes="[20, 50, 100]"
                    :page-size=this.pagination.pageSize
                    layout="total, sizes, prev, pager, next"
                    :total=this.pagination.total style="float:right;">
            </el-pagination>
        </div>
    </div>
</template>

<script>
  import { getPage } from '@/api/rescueApplyOrderApi'
  import { formatDate } from '@/utils/dateUtil'
  export default {
    name: 'list',
    data() {
      return{
        primaryKey: 'id',
        tableSearchParam:{},
        dataList:[],
        pagination: {
          showSizeChanger: true,
          pageSize: 20,
          pageNum: 1,
          total: 0
        },
        rescueStatus:[
          {statusId: '10', statusName: '待处理'},
          {statusId: '20', statusName: '审核中'},
          {statusId: '30', statusName: '待垫付'},
          {statusId: '40', statusName: '已驳回'},
          {statusId: '1000', statusName: '已完成'},
        ],
        returnStatus:[
          {statusId: '50', statusName: '待还款'},
          {statusId: '60', statusName: '已还款'},
          {statusId: '70', statusName: '已豁免'},
          {statusId: '1000', statusName: '已完成'},
        ]

      }
    },
    methods: {
      queryData(){
        const queryParams = {
          criteria: {
            ...this.tableSearchParam
          },
          pageDto: {
            ...this.pagination
          }
        }
        getPage(queryParams).then(response => {
          if (!response.hasError) {
            this.dataList = []
            const { list = [] } = response.result
            list.forEach(item => {
              this.dataList.push({
                ...item,
                applyDate: formatDate(item.applyDate,'yyyy-MM-dd'),
              })
            })
            this.pagination.total = response.result.total
          }
        })
      },
      showDetail(row){
        let orderId = row.id;
        sessionStorage.setItem("rescueApplyOrderId",orderId);
        this.$router.push('/rescueApplyOrder/detail');
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val
        this.queryData()
      },
      handleCurrentChange(val) {
        this.pagination.pageNum = val
        this.queryData()
      },
    },
    mounted() {
      this.queryData()
    }
  }
</script>

<style scoped>
    .page{
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

</style>
